<template>
	<view class="brick-x" :style="mainStyleGet" :class="mainClassGet">

	</view>
</template>

<script>
	export default {
		name: "lg-brick",
		props: {
			direction: {
				type: String,
				validator: v => ['row', 'col','rowr','colr'].includes(v)
			},
			span: {
				type: [String, Number],
				default: 6
			},
			basis: {
				type: [String, Number],
				default: 0
			},
			justify: {
				type: String,
				validator: v => ['start', 'center', 'end'].includes(v)
			},
			align: {
				type: String,
				validator: v => ['start', 'center', 'end'].includes(v)
			}

		},
		computed: {
			mainClassGet() {
				return {
					[]:
				}
			},
			mainStyleGet() {
				let styler = {}
				const {
					direction,
					span,
					basis,
					justify,
					align
				} = this.$props || {};
				!!direction && styler["flexDirection"] = direction;
				!!span && styler["flex"] = span;
				!!basis && styler["flexBasis"] = basis

				return styler
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" >
	.brick-x {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}
    
	.justify-start {
		justify-content: flex-start;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-around {
		justify-content: space-around;
	}

	.justify-between {
		justify-content: space-between;
	}

	.align-start {
		align-items: flex-start;
	}

	.align-end {
		align-items: flex-end;
	}

	.align-center {
		align-items: center;
	}

	.align-star {
		align-items: space;
	}

	.align-start {
		align-items: flex-start;
	}

	.align-start {
		align-items: flex-start;
	}

	.align-start {
		align-items: flex-start;
	}

	.align-start {
		align-items: flex-start;
	}

	.align-start {
		align-items: flex-start;
	}
</style>
